<script lang="ts" setup></script>

<template>
  <div class="border-box-3-wrapper">
    <div class="border-box-3-container" flex flex-col items-center justify-center p-50>
      <slot />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.border-box-3-wrapper {
  position: relative;
  background: rgba(255, 255, 255, 0.05);
}
.border-box-3-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 65%; /* 左上角的宽度 */
  height: 65%; /* 左上角的高度 */
  background:
    linear-gradient(to right, rgba(0, 176, 255, 1) 0%, rgba(255, 255, 255, 0.05) 100%) top,
    linear-gradient(to bottom, rgba(0, 176, 255, 1) 0%, rgba(255, 255, 255, 0.05) 100%) left;
  background-size:
    100% 4px,
    4px 100%;
  background-repeat: no-repeat;
  z-index: 2;
}
.border-box-3-wrapper::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 65%; /* 右下角的宽度 */
  height: 65%; /* 右下角的高度 */
  background:
    linear-gradient(to left, rgba(0, 176, 255, 1) 0%, rgba(255, 255, 255, 0.05) 100%) bottom,
    linear-gradient(to top, rgba(0, 176, 255, 1) 0%, rgba(255, 255, 255, 0.05) 100%) right;
  background-size:
    100% 4px,
    4px 100%;
  background-repeat: no-repeat;
  z-index: 2;
}
.border-box-3-container {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.05);
}
.border-box-3-container::before {
  content: '';
  position: absolute;
  top: 0px;
  left: 0px;
  width: 20px;
  height: 20px;
  background: linear-gradient(to bottom right, #01e5fe 0%, #0a0d1c 100%);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.border-box-3-container::after {
  content: '';
  position: absolute;
  bottom: 0px;
  right: 0px;
  width: 20px;
  height: 20px;
  background: linear-gradient(to top left, #01e5fe 0%, #0a0d1c 100%);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
</style>
